<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var obj = { a: 1, b: 2 }

    // 根据源对象得到了新对象(代理对象)
    // 1. 简单写法 => 所有对代理对象的操作,都会同步到源对象
    // var o = new Proxy(obj);

    // 2. 代理对象上配置 取值拦击和赋值拦截
    var o = new Proxy(obj, {
        get(target, key) {
            console.log("取值拦截", key);
            // return undefined;  // 不允许对源对象取值
            return target[key];  // 允许对源对象取值
        },
        set(target, key, val) {
            console.log("赋值拦截", key);
            // return undefined;  // 不允许对源对象赋值
            target[key] = val;  // 允许对源对象赋值
        }
    });

    // console.log(o.a);
    // console.log(o.b);
    // console.log(o.c);
    // console.log(o.d);
    // console.log(o.e);

    o.a = 10
    o.b = 20
    o.c = 30
    o.d = 30
    o.e = 30

    console.log(o);
    console.log(obj);


</script>

</html>